<template>
<div id="theme">
    <div @click="themeToggle" id="themeTitle"></div>

    <!-- 动画 -->
    <transition name="themeContent">
        <div v-if="show" id="themeContent">
            <template v-for="(value,key) in themes" v-if="key=='themes'">
                <div v-for="(item,index) in value" :class="[item,(item==themes.checked)?'active':'']" @click="changeTheme($event)">
                    {{ index }}{{item}}
                </div>
            </template>
        </div>
    </transition>

</div>
</template>

<script>
export default {
    data() {
        return {
            show: false
        }
    },
    created() {
        var _self = this;
        this.$axios.post('/postThemes').then((data) => {
            _self.$store.dispatch('getThemesAct', data.data);
        })
    },
    computed: {
        themes() {
            var themes = {};
            themes.themes = this.$store.state.theme.themes;
            themes.checked = this.$store.state.theme.checked;
            return themes;
        }
    },
    methods: {
        themeToggle() {
            this.show = !this.show;
        },
        changeTheme(e) {
            let classNames = e.srcElement.className;
            let arrClassNames = classNames.split(" ");
            this.$store.dispatch('changethemeAct', arrClassNames[0]);
            this.show = !this.show;
        }
    }
}
</script>
<style scoped>
#theme {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

#themeTitle {
    height: 55px;
    width: 20px;
    cursor: pointer;
    /* Safari 5.1 - 6.0 */
    background: -webkit-linear-gradient(#1ABB9C, #2A3F54);
    /* Opera 11.1 - 12.0 */
    background: -o-linear-gradient(#1ABB9C, #2A3F54);
    /* Firefox 3.6 - 15 */
    background: -moz-linear-gradient(#1ABB9C, #2A3F54);
    /* 标准的语法 */
    background: linear-gradient(#1ABB9C, #2A3F54);
}

#themeContent {
    position: absolute;
    top: 0;
    right: 0;
    height: 55px;
    width: 165px;
}

#themeContent {
    list-style: none;
    display: flex;
}

#themeContent>div {
    width: 55px;
    height: 55px;
    cursor: pointer;
}


#themeContent .dark {
    background: #2A3F54;
}

#themeContent .light {
    background: #F7F7F7;
}

#themeContent .primary {
    background: #CCCCCC;
}

#themeContent .active {
    border: 1px solid #ff0000;
}

/* 动画 */

.themeContent-enter-active {
    animation: bounce-in .5s;
}

.themeContent-leave-active {
    animation: bounce-in .5s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
</style>
